import React, { Component } from 'react';
import Header from './components/Header';
import Home from './pages/Home';
import About from './pages/About';
import Test from './pages/Test';

import MyLink from './components/MyLink';
/* NavLink 可以做导航的路径，相比较Link组件来说，多了一些属性，比如activeClassName属性，就是当前路由被选中后，使用这个属性中的类型 */
import { Switch, Route } from 'react-router-dom';


/* 
  组件的分类：
    站在定义的方式分类：
      - 函数式组件
      - 类式组件

    站在使用的方式分类：
      - 一般组件
      - 路由组件

    路由组件和一般组件的区别：
      - 使用方式不同：
        - 一般组件：程序员直接用标签去渲染 <Header/>
        - 路由组件：依赖路由器进行路径的匹配，让用让这个组件渲染的 <Route path="/about" component={About} />
      - 存放的文件夹位置不同
        - 一般组件：components
        - 路由组件：pages

      - 接受的props参数也是不同的
        - 一般组件：我们给组件标签传递什么属性，就可以接受什么样的props
        - 路由组件：会收到固定的几个props属性
          history:
            go: ƒ go(n)
            goBack: ƒ goBack()
            goForward: ƒ goForward()
            location: {pathname: '/about', search: '', hash: '', state: null, key: 'e97ra8'}
            push: ƒ push(path, state)
            replace: ƒ replace(path, state)
          location:
            pathname: "/about"
            search: ""
            state: null
          match:
            isExact: true
            params: {}
            path: "/about"
            url: "/about"
*/

export default class App extends Component {
    render() {
        return (
            <div>
                <Header />

                <div className="row">
                    <div className="col-xs-2 col-xs-offset-2">
                        <div className="list-group">
                            {/* 自己封装的路由连接组件 */}
                            {/* 当自定的组件是双标签使用的时候，内容是通过prop的children属性传递进去的 */}
                            <MyLink to='/about'>About</MyLink>
                            <MyLink to='home'>Home</MyLink>


                            {/*  <Link className="list-group-item active" to='/about' >About</Link>
                            <Link className="list-group-item" to='/home'>Home</Link> */}
                        </div>
                    </div>
                    <div className="col-xs-6">
                        <div className="panel">
                            <div className="panel-body">

                                {/* route标签是路由的切换实现，path属性是用来监听路径，然后路径匹配成功则加载对应的组件,component属性后跟当前要加载的组件 */}
                                {/* 默认来说第一次匹配路径成功，也会继续向下匹配，查看是否还有其他的同路径组件需要加载，如果有，则继续展示组件 */}
                                {/* 如果在根据路径查找组件的过程中，进入了一个Switch组件中，则查到之后，会立马退出当前的Switch组件，继续向下走 */}
                                <Switch>
                                    <Route path='/about' component={About} />
                                    <Route path='/home' component={Home} />
                                    <Route path='/about' component={Test} />
                                </Switch>
                            </div>
                        </div>
                    </div>
                </div>
            </div >
        )
    }
}
